<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">


      <el-form-item label="监测站点" prop="pointId">
        <el-select ref="pointRef" v-model="queryParams.pointId" @change="changePoint" placeholder="请选择参数类型">
          <el-option label="  ——— 全部 ———  " value=""></el-option>
          <el-option
            v-for="collectPoint in collectPointList"
            :key="collectPoint.id"
            :label="collectPoint.name"
            :value="collectPoint.id"
          ></el-option>
        </el-select>
      </el-form-item>


    </el-form>
    <el-row v-if="dataMsgLogList.length>0">

      <el-col :span="24" v-for="dataMsgLog in dataMsgLogList" :key="dataMsgLog.id" >
        <el-card class="box-card">
          {{dataMsgLog.msgTime}} 【{{dataMsgLog.pointName}}】 {{dataMsgLog.msgTxt}}
        </el-card>
      </el-col>

    </el-row>

    <el-row v-else>
      <el-col :span="24">
        <el-card class="box-card">
          【{{pointName}}】 无数据报文
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { listCollectPoint } from "@/api/basic/collectPoint";
  import { listDataMsgLog } from "@/api/basic/dataMsgLog";

export default {
  name: "DutyDataReceive",
  components: {
  },
  data() {
    return {
      collectPointList: [],
      dataMsgLogList:[],
      pointName:'',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 30,
        pointId: '',
      },
      timer: '',
    };
  },
  created() {
    this.getPointList();
    this.getList();
  },
  methods: {
    changePoint(val){
      if(val==''){
        this.pointName = '平台测点'
      }else{
        let obj = {};
        obj = this.collectPointList.find(item =>{
          return item.id === val
        });
        this.pointName = obj.name
      }
      this.getList();
    },
    /** 查询报文记录日志列表 */
    getList() {
      listDataMsgLog(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.dataMsgLogList = response.rows;
      });
    },
    /** 查询监测站点管理列表 */
    getPointList() {
      let obj = {
        pageNum: 1,
        pageSize: 1000
      }
      listCollectPoint(obj).then(response => {
        this.collectPointList = response.rows;
      });
    },
  },
  mounted() {
    this.timer = setInterval(this.getList, 1000*60);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>
